<template>
  <div id="offsetAction">
    <a
      title="回到顶部"
      class="action-service"
      href="JavaScript:;"
      v-show="isShowScroll"
      @click="scrollToTop"
    >
      <i class="iconfont icon-jiantoushang"></i>
    </a>
    <a title="客服" class="action-service" href="JavaScript:;">
      <b></b>
    </a>
    <a title="打开播放器" class="open-player" @click="toPlay" _blank>
      <b></b>
    </a>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
import utils from "@/libs/utils";
export default {
  name: "OffsetAction",
  setup() {
    const state = reactive({
      isShowScroll: false,
    });

    const scrollToTop = () => {
      let top =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-top / 4);
        top += ispeed;
        document.documentElement.scrollTop = document.body.scrollTop = top;

        if (top <= 100) {
          document.documentElement.scrollTop =
            document.body.scrollTop =
            top =
              0;
          state.isShowScroll = false;
          clearInterval(timer);
        }
      }, 16);
    };

    const handleScroll = (e) => {
      let top =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (top > 600) {
        state.isShowScroll = true;
      } else {
        state.isShowScroll = false;
      }
    };

    onMounted(() => {
      window.addEventListener(
        "scroll",
        utils.debounce(handleScroll, 40),
        false
      );
    });

    const toPlay = () => {
      let isTo = utils.getLocalStorage("isToPlayer");
      if (isTo) {
        
      } else {
        utils.setLocalStorage("isToPlayer", "");
        window.open("/player");
      }
    };

    return {
      ...toRefs(state),
      scrollToTop,
      toPlay,
    };
  },
};
</script>

<style lang="scss" scoped>
#offsetAction {
  position: fixed;
  bottom: 55px;
  z-index: 100;
  padding-top: 55px;
  opacity: 0;
  transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -webkit-transition: opacity 0.6s;

  i {
    font-size: 40px;
  }

  a {
    display: block;
    width: 54px;
    height: 54px;
    line-height: 54px;
    color: #fff;
    background-color: #333;
    text-align: center;
    cursor: pointer;
    margin-bottom: 1px;
    opacity: 0.75;

    b {
      margin-top: 9px;
      display: inline-block;
      width: 36px;
      height: 36px;
      overflow: hidden;
      background: url(../../assets/images/icon_footer.png);
    }
  }
  .action-service {
    b {
      background-position: 0 -3px;

      &:hover {
        background-position: 0 -41px;
      }
    }
  }
  .open-player {
    b {
      background-position: -44px -3px;

      &:hover {
        background-position: -44px -41px;
      }
    }
  }
}
</style>